<template>
  <div style="padding: 0 30px">
    <div style="height: 80vh;overflow: scroll;padding: 10px">
      <a-timeline>
        <a-timeline-item color="green" v-for="(item,index) in dataList">
          <a-tag color="#f50">{{item.value}}</a-tag>
          <a-tag color="#4b6ff6">{{item.name}}</a-tag>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import {getStatisticsInfo} from "../../../api/client/home.js";

const props = defineProps({
  type: String,
  title:String
})

const getStat=async ()=>{
  const res= await getStatisticsInfo({type:props.type})
  return res.data
}

const dataList=ref([])
onMounted(async ()=>{
  let data = await getStat();
  let sortedEntries = Object.entries(data).sort((a, b) => b[1] - a[1]);
  data = Object.fromEntries(sortedEntries);
  for (let domain of Object.keys(data)) {
    let val = data[domain]
    if (props.type == 3 || props.type == 4) {
      val = (val / 1024 / 1024 / 1024).toFixed(2)+"/GB"
    }else {
      val=val+"/次"
    }
    dataList.value.push({
      name:domain,
      value:val
    })
  }
})




</script>

<style scoped>

#chart {
  width: 80vw;
  height: 80vh;
}
::-webkit-scrollbar {
  display: none;
}

</style>
